﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>00: AutoSizer Test</title>
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			overflow: hidden;
			font-family: "Segoe UI", Arial, Verdana;
			font-size: 9pt;
			background-color: #F1F1F1;
		}
	</style>
	<script src="../../../bootloader.js" type="text/javascript"></script>
	<script src="../source/AutoSizer.js" type="text/javascript"></script>
	<!-- -->
	<script type="text/javascript">
		go = function() {
			view = new opus.View({
				minWidth: 376,
				minHeight: 164,
				styles: {border: 8, padding: 4, borderColor: "green"},
				layoutKind: "vbox",
				controls: [
					{name: "root", verticalAlign: "fit", horizontalAlign: "fit", layoutKind: "vbox", styles: {border: 1, padding: 2}, controls: [
						{type: "AutoSizer", content: "Zippy dippy doo"},
						{type: "AutoSizer", content: "Zonk!", styles: {fontSize: "22px", bold: true}},
						{type: "AutoSizer", content: "You are damaging my calm in a really bad way so stop right now or I will have to kill u.", styles: {margin: 10, border: 2}}
					]}
				],
				ready: function() {
					var more = this.$.root.exportControls(this);
					console.time("autoSize");
					for (var i=0, m=this; i< 100; i++) {
						m = m.createComponent({
							verticalAlign: "fit",
							horizontalAlign: "fit",
							layoutKind: "vbox",
							styles: {padding: 1, border: 1, margin: 0},
							l: 16,
							controls: more
						});
					}
					this.inherited("ready", arguments);
					console.timeEnd("autoSize");
				}
			});
		}
	</script>
</head>
<body onload="go()">
</body>
</html>
